/**
 * 图片库
 */
import * as React from 'react'
import { Card, Button, Form, Row, Col, Select, Cascader, Input } from 'antd'
import Authentication from '../../router/Authentication'
import { PageHeaderLayout, CardTable } from '..'
import '../../assets/style/TableList.less'
const FormItem = Form.Item
const Option = Select.Option

export interface State {
  formValues: any
  pagination: any
  selectedRows: any []
  allSelected: boolean
}

@Authentication
class CateImg extends React.Component<any, State> {
  
  state = {
    pagination: {
      pageIndex: 1,
      pageSize: '20'
    },
    formValues: {},
    selectedRows: [],
    allSelected: false
  }
  componentDidMount () {
    this.search(1)
  }

  handleFormReset = () => {
    const { form } = this.props
    form.resetFields()
    this.search(1)
  }
  //选中事件
  handleSelectRows = (rows: any []) => {
    const { list } = this.props
    let allSelected = false
    if(rows.length>0 && rows.length == list.length) allSelected = true
    this.setState({
      allSelected,
      selectedRows: rows,
    })
  }
  /**
   * 点击查询按钮
   */
  handleSearch = (e: any) => {
    e.preventDefault()
    const { form } = this.props
    form.validateFields((err: any, fieldsValue: any) => {
      if (err) return
      
      this.search(1, fieldsValue)
    })
  }
  /**
   * 调用查询方法,1是查询，2是loadmore
   */
  search (type: number, param?: any) {
    const { getList } = this.props
    const { formValues } = this.state
    let params = {}
    if (type == 1) {
      const pagination = {
        pageIndex: 1,
        pageSize: '20'
      }
      this.setState({
        ...this.state,
        formValues: param || {},
        pagination
      })
      params = { ...pagination, ...param }
    } else {//加载更多
      params = { ...param, ...formValues }
    }
    getList(type, params)
  }
  renderSimpleForm() {
    const { form, categorys, bands, status } = this.props
    const { getFieldDecorator } = form
    getFieldDecorator('dlid', { initialValue: [] })
    getFieldDecorator('xlid', { initialValue: [] })
    getFieldDecorator('status', { initialValue: [] })
    getFieldDecorator('flag', { initialValue: [] })
    const changeCateGorys = (e: string []) => {
      let dlid = e[0]
      let xlid = ''
      if (e.length>1) xlid = e[1]
      form.setFieldsValue({
        dlid,
        xlid
      })
    }
    const changeStatus = (e: string []) => {
      let status = e[0]
      let flag = ''
      if (e.length>1) flag = e[1]
      form.setFieldsValue({
        status,
        flag
      })
    }
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={5} sm={24}>
            <FormItem label="编码">
              {getFieldDecorator('sampleid')(
                <Input placeholder="请输入编码"/>
              )}
            </FormItem>
          </Col>
          <Col md={5} sm={24}>
            <FormItem label="波段">
              {getFieldDecorator('band')(
                <Select placeholder="请输入/选择波段" showSearch mode="multiple">
                  {bands.map( (band: any, index: number) => (<Option key={index} value={band.Key}>{band.Value}</Option>))}
                </Select>)}
            </FormItem>
          </Col>
          <Col md={5} sm={24}>
            <FormItem label="分类">
              <Cascader options={categorys} onChange = {changeCateGorys} changeOnSelect placeholder="请选择分类"/>
            </FormItem>
          </Col>
          <Col md={5} sm={24}>
            <FormItem label="状态">
              <Cascader options={status} onChange = {changeStatus} changeOnSelect placeholder="请选择状态"/>
            </FormItem>
          </Col>
          <Col md={4} sm={24}>
            <span className="submitButtons">
              <Button type="primary" htmlType="submit">
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                重置
              </Button>
            </span>
          </Col>
        </Row>
      </Form>
    )
  }
  /**
   * 加载更多
   */
  onLoadMore = () => {
    const { pagination: { pageIndex, pageSize } } = this.state
    let pagination = {
      pageIndex: pageIndex+1,
      pageSize
    }
    this.setState({
      pagination,
    })
    this.search(2, pagination)
  }
  //编辑
  handleInfo = (row: any) => {
    const { record } = this.props
    record({ id: row.sampleid, no: row.id })
    this.props.history.push({ pathname: '/CateImg/detail' })
  }
  render () {
    const { loading, list } = this.props
    return (
      <PageHeaderLayout>
        <Card bordered={false}>
          <div className="tableList">
            <div className="tableListForm">{this.renderSimpleForm()}</div>
            <CardTable
              picKey = 'img1'
              textRow = "oneckflag"
              rowKey = "sampleid"
              select = {false}
              loading={loading}
              data={list}
              onLoadMore={this.onLoadMore}
              onClick = {this.handleInfo}
              onSelectRow={this.handleSelectRows}
            />
          </div>
        </Card>
      </PageHeaderLayout>
    )
  }
}

import * as actions from '../../redux/actions/CateInfoAction'
import * as globalActions from '../../redux/actions/GlobalAction'
import { StoreState } from '../../redux/Types'
import { Dispatch } from 'redux'
import { connect } from 'react-redux'


export function mapStateToProps({global: { band }, cateInfo: { list, loading }, setting: { categorys, bands, status } }: StoreState) {
  return {
    band,
    list,
    loading,
    categorys,
    bands,
    status
  }
}
export function mapDispatchToProps(dispatch: Dispatch<actions.CateInfoAction | globalActions.GlobalAction>) {
  return {
    getList: (type: number, data: any) => {  
      dispatch(actions.recordType(type))
      dispatch(actions.getCatePicList(data))
    },
    // record: (record: any) => {
    //   const { id, no} = record
    //   dispatch(actions.recoreMakes({sampleId: id}))
    //   dispatch(globalActions.recordSample({ id: no }))
    //   dispatch(globalActions.getSampleScore({ sampleId: id }))
    //   dispatch(globalActions.getSampleImgs({ sampleId: id }))
    //   dispatch(globalActions.getRoleScore({ sampleId: id }))
    // },
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Form.create()(CateImg))